<template>
  <div class="login-container">
    <div class="land-box">
      <div class="welcome">Hi~ 你好呀</div>
      <el-form>
        <div class="item">
          <span>账号：</span>
          <el-input v-model="account" clearable placeholder="请输入密码" />
        </div>
        <div class="item">
          <span>账号：</span>
          <el-input v-model="password" clearable placeholder="请输入密码" type="password" />
        </div>
      </el-form>
      <el-button class="login-btn" type="primary" @click="login">登陆</el-button>
    </div>
  </div>
</template>

<script lang="ts">
export default { name: 'Login' }
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { loginIn } from '@/api/login'
const router = useRouter()

const account = ref('admin')
const password = ref('123456')

/**
 * @description: 登陆
 * @author Cui Ruichen
 * @date 2023-03-25 10:31:36
 */
const login = async () => {
  const res = await loginIn()
  // 存储token
  localStorage.setItem('token', res.token)
  router.replace({
    path: '/home',
  })
}
</script>

<style scoped lang="scss">
.login-container {
  position: relative;
  height: 100%;
  background-color: #c6e2ff;
  .land-box {
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
    width: 360px;
    padding: $base-padding;
    border: 1px solid $base-border-color;
    border-radius: $base-border-radius;
    box-shadow: $base-box-shadow;
    background-color: #fff;
    .welcome {
      text-align: center;
      font-size: 24px;
      margin-bottom: 14px;
    }
    .item {
      margin-bottom: 14px;
      span {
        display: block;
        width: 70px;
        margin-right: 10px;
      }
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>
